import React, { Component, Suspense } from 'react'
import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
import { Breadcrumb, Dropdown, Layout, Menu, message, Spin } from 'antd';
import { mainRoutes } from '../../routes'
import NaviBar from './NaviBar/NaviBar'
import { bannerReq, relatedLinkReq } from '../../requests/Frame'
import './frame.less'
import { footerReq } from "../../requests/footer";
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { connect, ConnectedProps } from 'react-redux'
import { loginFail } from '../../actions/loginAction'
import { RootState } from '../../reducers'
import { logoutReq } from '../../requests/login';
import UserType from '../../types/UserType';
import { RelatedLink } from '../../types/Frame';
import { getRes } from "../../configFile";

const { Content, Footer } = Layout;

//props类型
interface PropsFromRedux extends ConnectedProps<typeof connector>, RouteComponentProps { }

//state类型
interface IState {
    bannerURL: string,
    footer: string,
    relatedLink: Array<{ linkName: string, link: string, sequence: number }>
}


class Frame extends Component<PropsFromRedux, IState> {
    constructor(props: PropsFromRedux) {
        super(props)
        this.state = {
            bannerURL: '',
            footer: '',
            relatedLink: []
        }
    }

    //登出点击
    onLogout = async () => {
        try {
            const res = getRes(await logoutReq())
            //成功退出
            if (res.isSuccessful) {
                this.props.logout()
                message.success('退出成功')
            }
            //退出请求失败
            else
                message.error(res.message)
        }
        catch (err) {
            message.error(err)
        }

    }

    //右上角下拉菜单
    onRenderDropdown = () => (
        <Menu>
            <Menu.Item>
                <Link to={this.props.userType === UserType.DEVICEADMIN ? '/personal/userManage' : '/siteManage/userInfo'} >
                    {this.props.userType === UserType.DEVICEADMIN ? '设备管理员管理中心' : '超管控制中心'}
                </Link>
            </Menu.Item>
            <Menu.Item>
                <Link to='#' onClick={this.onLogout}>
                    退出登录
                 </Link>
            </Menu.Item>
        </Menu>
    )

    async componentDidMount() {
        //获取banner
        try {
            const resBanner = getRes(await bannerReq())
            if (resBanner.isSuccessful === true) {
                this.setState({ bannerURL: resBanner.data })
            }
            //获取相关链接
            const resLink = getRes(await relatedLinkReq())
            if (resLink.isSuccessful === true) {
                resLink.data.sort((a: RelatedLink, b: RelatedLink) => a.sequence - b.sequence)
                this.setState({
                    relatedLink: resLink.data
                })
            }

            //获取页脚信息
            const resFooter = getRes(await footerReq())
            if (resFooter.isSuccessful === true) {
                this.setState({
                    footer: resFooter.data
                })
            }
        }
        catch (error) {
            message.error(error.toString())
        }
    }

    render() {
        return (
            <Layout className='layout' style={{ minHeight: '100%', width: '1366px', margin: '0 auto', backgroundColor: 'white' }} >

                <div style={{ backgroundImage: `url(${this.state.bannerURL})` }} className='banner' >
                    {this.props.isLogin ?
                        <Dropdown overlay={this.onRenderDropdown()} className='alreadyLoginBox'>
                            <div>
                                <UserOutlined style={{ padding: '8px' }} />
                                {this.props.displayName}
                                <DownOutlined />
                            </div>
                        </Dropdown>
                        :
                        <Link className='hoverBox' to='/login'>
                            <UserOutlined style={{ padding: '8px' }} />
                            登录
                        </Link>
                    }
                </div>

                <NaviBar itemList={mainRoutes} />

                <Suspense
                    fallback={
                        <Spin spinning={true} size='large'>
                            <div className="frameCardWrapper" style={{ height: '1000px' }}></div>
                        </Spin>
                    }>
                    <Content>
                        {this.props.children}
                    </Content>
                </Suspense>

                <Footer className='footer'>
                    <div className='relatedLink'>
                        相关链接：
                        <Breadcrumb>
                            {
                                this.state.relatedLink.map(link => {
                                    return (
                                        <Breadcrumb.Item key={link.linkName}>
                                            <a target="_blank" rel="noopener noreferrer" href={link.link}>{link.linkName}</a>
                                        </Breadcrumb.Item>
                                    )
                                })}
                        </Breadcrumb>
                    </div>
                    <div className="footerText" dangerouslySetInnerHTML={{ __html: this.state.footer }} />
                    {/* OurEDA @2020 */}
                </Footer>
            </Layout>
        )
    }
}

//connect加入props
const mapStateToProps = (state: RootState) => {
    return {
        isLogin: state.loginReducers.isLogin,
        displayName: state.loginReducers.displayName,
        userID: state.loginReducers.userID,
        userType: state.loginReducers.userType
    }
}
const mapDispatchToProps = {
    logout: () => (loginFail())
}
const connector = connect(mapStateToProps, mapDispatchToProps)

export default withRouter(connector(Frame))